<template>
    <div class="loginBox">
        <div id="login_area">
            <h2>天道智能选校管理系统</h2>
            <div id="login_form">
                <el-form  class="demo-ruleForm" :model="form">
                    <el-form-item label="账号">
                        <el-input type="text" placeholder="请输入用户名" v-model="form.userVal" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password"  placeholder="请输入密码" v-model="form.pwdVal" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="tip" v-show="orShow">{{tipMsg}}</el-form-item>
                    <el-form-item>
                        <el-checkbox label="记住密码" v-model="form.remberPwd"></el-checkbox>
                        <el-checkbox label="自动登录" v-model="form.autoLogin"></el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="loginBtn" @click="loginIn()">登录</el-button> </router-link> 
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
    
</template>

<script>
 import qs from 'qs';
export default {
    name:"login",
    data(){
        return {
           form:{
                userVal:"admin",
                pwdVal:"123456",
                remberPwd:false,
                autoLogin:false
           },
        //    rules:{
        //        userName:[
        //            { required: true, message: '请输入账号', trigger: 'blur' },
        //            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        //        ],
        //        passWord:[
        //             { required: true, message: '请输入账号', trigger: 'blur' },
        //             { min: 4, max: 20, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        //        ]
        //    },
            orShow:false,
            tipMsg:" 您输入的用户名或密码不正确，请核对后重新输入！"
        }
    },
    mounted(){
        var isRemPwd = localStorage.getItem("remberData");
        //判断是否记住了密码 自动登录
        if(isRemPwd != null){
            //this.$router.replace('login');
            if(JSON.parse(isRemPwd).remberPwd){
                 this.form.userVal = JSON.parse(isRemPwd).userName;
                this.form.pwdVal = JSON.parse(isRemPwd).pwd;
                this.form.remberPwd = JSON.parse(isRemPwd).remberPwd;
            }
            if(JSON.parse(isRemPwd).autoLogin){
                this.form.autoLogin = JSON.parse(isRemPwd).autoLogin;
                // this.$router.replace('index');
            }
        }
    },
    methods:{
        loginIn(formName){
            var _this = this;
             if(_this.form.userVal == "admin" && _this.form.pwdVal == "123456"){  //用户名匹配的情况下
                this.orShow = false;
                // 记住密码
                if(_this.form.remberPwd){
                    var userData = {
                        userName:_this.form.userVal,
                        pwd:_this.form.pwdVal,
                        remberPwd: _this.form.remberPwd,
                        autoLogin: _this.form.autoLogin
                    }
                    localStorage.setItem("remberData",JSON.stringify(userData));
                }else{
                    localStorage.setItem("user",_this.form.userVal);
                    localStorage.removeItem("remberData");
                }
                this.$router.replace('index');

            }else{
                this.orShow = true;
            }
           
                // this.$refs[formName].validate((valid) => {
                //     if (valid) {
                //         _this.$http.post(url_login, qs.stringify({
                //             'userName': _this.form.username, // 用户名
                //             'passWord': _this.form.pass
                //         })).then(function(res){
                //             if(res.data.code == 200){
                //                 // _this.$message(res.data.msg);
                //                 // _this.$router.push({ path: '/home' });
                //             } else {
                //                 // _this.$message.error(res.data.msg);
                //                 return false;
                //             }
                //         })
                //     } else {
                //         // _this.$message.error('账号或密码错误');
                //         return false;
                //     }
                // });
        }
    }
}
</script>
<style>
    body,.html{
        width:100%;
        height: 100%;
        min-height: 585px;
        font-family: "Microsoft Yahe"
    }
    .loginBox{
        height:100%;
        background:#1a8efa;
    }
    #login_area h2{
        display: inline-block;
        margin-top: 52px;
        color: #fff;
        font-size: 45px;
        font-family: "宋体"
    }
    #login_form{
        width: 400px;
        height: 270px;
        margin: 66px auto;
    }
    #login_area{
        margin: 0px auto;
        width: 986px;
        height:585px;
        background: url('../assets/images/login.jpg') 0px 0px no-repeat;
        position: relative;
    }
    #login_form .el-form-item{
        margin-bottom: 0;
    }
    .loginBtn{
        width:120px;
        height: 36px;
        font-size: 16px;
        margin-top: 10px
    }
    .tip{
        color: #f00;
        line-height: 40px;
    }
</style>

